<template>

  <div class="mui-numbox" data-numbox-min='1'>
    <button class="mui-btn mui-btn-numbox-minus" @click="subValue">-</button>
    <input id="test" class="mui-input-numbox" type="number" @change="countChanged" value="1" ref="numbox" />
    <button class="mui-btn mui-btn-numbox-plus" @click="addValue">+</button>
  </div>

</template>

<script>

export default {
  mounted() {

  },
  methods: {
    //通过方法向父组件传值
    countChanged() {
      // console.log(this.$refs.numbox.value);
      // 通过ref绑定元素，拿到元素中的属性值
    // 每当 文本框的数据被修改的时候，立即把 最新的数据，通过事件调用，传递给父组件
      this.$emit("getCounts",parseInt(this.$refs.numbox.value))
    },
    addValue() {
      // 传值时一定要注意，要不在传值之前改变值的累性，要不就接收值时转换数值类型
      this.$refs.numbox.value = parseInt(this.$refs.numbox.value) + 1
      this.countChanged()
    },
    subValue() {
      if(parseInt(this.$refs.numbox.value) === 0){
        return
      }
      this.$refs.numbox.value -= 1
      this.countChanged()
    }
  },
  props: ["max"],
  watch: {
    // 属性监听
    max: function(newVal, oldVal) {

    }
  }
};
</script>

<style lang="scss" scoped>

</style>